<template>
  <div class="container flex">
    <scroll-view scroll-y="true" scroll-with-animation='true' class="left">
      <view class="list textCenter">
        <view class="item fz12" @click="itemClick(index)" :class="{active: index == current}" v-for="(item, index) in categoryList" :key="index">{{item.name}}</view>
      </view>
    </scroll-view>
    <scroll-view scroll-y="true" @scroll="scroll" scroll-with-animation='true' class="right" :scroll-top="scrollTopRight">
      <view class="productList shrink">
        <view class="item" v-for="(item, index) in categoryList" :key="index" :id="'id'+item.id">
          <uv-divider :text="item.name"></uv-divider>
          <view class="grids gridColumns3 eles">
            <view class="ele" v-for="(ele, idx) in item.child" :key="idx">
              <view class="grid-item">
                <view class="flex justifyCenter">
                  <uv-avatar :src="ele.extra" mode="aspectFill" size="50"></uv-avatar>
                </view>
                <view class="fz14 textCenter">{{item.name}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
let categoryList = ref([]);
let current = ref(0);
let list = ref([]);
let scrollTopRight = ref(0);
let canChangeLeft = false;

onLoad((e) => {
  uni.setNavigationBarTitle({
    title: e.name,
  });
});

onShow(() => {
  getInfo();
});

async function getInfo() {
  categoryList.value = await proxy.$shopApis.category();
  nextTick(async () => {
    for (let index = 0; index < categoryList.value.length; index++) {
      const element = categoryList.value[index];
      element.top = await viewInfo("#id" + categoryList.value[index].id, "top");
    }
    console.log("categoryList.value", categoryList.value);
  });
}

async function itemClick(index) {
  current.value = index;
  scrollTopRight.value = categoryList.value[index].top;
  canChangeLeft = false;
  setTimeout(() => {
    canChangeLeft = true;
  }, 2000);
}

function scroll(e) {
  if (!canChangeLeft) return;
  let arr = [];
  for (let index = 0; index < categoryList.value.length; index++) {
    const element = categoryList.value[index];
    if (e.detail.scrollTop <= element.top) {
      arr.push(index);
    }
  }
  if (arr.length) current.value = arr[0];
}

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}
</script>



<style lang="scss" scoped>
.container {
  .left {
    background-color: #f7f7f7;
    width: 130px;
    height: 100vh;
    .list {
      .item {
        padding: 15px 0;
        border-left: 2px solid transparent;
      }
      .active {
        background-color: white;
        color: #fc4141;
        border-left: 2px solid #fc4141;
      }
    }
  }
  .right {
    width: 100%;
    height: 100vh;
    padding: 0 15px;
    .productList {
      .eles {
        gap: 15px 15px; //上下间距 左右间距
      }
    }
  }
}
</style>
